<template>
    <!-- 常规布局 -->
    <div class="layout">
        <a-layout class="layout-container">
            <a-layout-header class="header">
                <div class="title" >
                    <span class="title-name" >{{$t(title)}}</span>
                    <span class="title-desc" v-if="titleDesc">
                        <info-circle-filled class="title-icon"/>{{$t(titleDesc)}}
                    </span>
                </div>
            </a-layout-header>
            <a-layout-content class="content">
                <!-- 内容左边 -->
                <div class="left-content" v-if="showLeft" >
                    <slot name="left" />
                </div>
                <!-- 内容右边 -->
                <div class="right-content" :style="{width: showLeft?'calc(100% - 260px)':'100%'}" >
                    <slot name="right" />
                </div>
            </a-layout-content>
        </a-layout>
    </div>
</template>

<script setup lang="ts">
import { InfoCircleFilled } from '@ant-design/icons-vue'

const slots = useSlots();

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    titleDesc:{
        type: String,
        default: ''
    },
})

// 是否显示左边 主要用于左边的tree
const showLeft = computed(() => {
    return !!slots.left;
})
</script>

<style lang="less" scoped>
.layout{
    height: 100%;
    padding: var(--spacing-frame-around);
    background: var(--bg);
    &-container{
        height: 100%;
        .header{
            background-color: var(--bg);
            padding: 0;
            height: auto;
            line-height: 1;
            padding-bottom: var(--spacing-frame-around-map);
        }
        .title{
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            .title-name{
                float: left;
                font-size: var(--font-size-page-title);
                font-weight: var(--font-size-weight-bold);
                line-height: var(--line-height-page-title);
            }
            .title-desc{
                font-size: var(--font-size-base);
                color: var(--font-s);
                font-weight: var(--font-size-weight-normal);
                margin-left: var(--spacing-frame-around-map);
                line-height: var(--line-height-base);
                .title-icon{
                    margin-right: 4px;
                    color: var(--font-s);
                }
            }
        }
        .content{
            position: relative;
            display: flex;
            background-color: var(--block);
            border-radius: var(--border-radius);
            .left-content{
                width: 260px;
                border-right: 1px solid var(--split);
            }
            .right-content{
                padding: var(--spacing-frame-around);
                overflow: auto;
            } 
        }
    }
}
</style>